<template>
  <el-form :model="form5" label-width="auto" style="max-width: 1300px;min-width: 1300px">
    <div class="common-layout">
      <el-container>
        <el-main>
          <!--标题-->
          <el-row>
            <el-col :span="24">
              <div class="grid-content ep-bg-purple-dark the_font_is_bold"/>
              <h1 style="font-size: 40px">
                JGH-1000D/1400A/1800B罗茨干泵装配记录
              </h1>
            </el-col>
          </el-row>
          <!--Case-->
          <el-row>
            <el-col :span="2" style="padding-left: 10px;">
              <div class="grid-content ep-bg-purple"/>
              <span class="fontSize the_font_is_bold">Case</span>
            </el-col>
            <el-col :span="22">
              <el-input
                  v-model="form5.input_Case"
                  style="width: 100%;height: 24px"
                  disabled
                  placeholder="请输入"
                  clearable
              />
            </el-col>
          </el-row>
          <!--罗茨干泵编号等-->
          <el-row>
            <el-col :span="3" style="">
              <div class="grid-content ep-bg-purple"/>
              <span class="the_font_is_bold">罗茨干泵编号:</span>
            </el-col>
            <el-col :span="3" style="">
              <div class="grid-content ep-bg-purple"/>
                <el-input
                    v-model="form5.input_Roots_dry_pump_number"
                    style="width: 100%;height: 24px"
                    placeholder="请输入"
                    clearable
                />
            </el-col>
            <el-col :span="2" style="">
              <div class="grid-content ep-bg-purple"/>
              <span class="the_font_is_bold">装配人:</span>
            </el-col>
            <el-col :span="2" style="">
              <div class="grid-content ep-bg-purple"/>
                <el-input
                    v-model="form5.input_Assemblers"
                    style="width: 100%;height: 24px"
                    placeholder="请输入"
                    clearable
                />
            </el-col>
            <el-col :span="3" style="">
              <div class="grid-content ep-bg-purple"/>
              <span class="the_font_is_bold">装配开始时间:</span>
            </el-col>
            <el-col :span="4" style="">
              <div class="grid-content ep-bg-purple"/>
                <el-date-picker
                    v-model="form5.input_Assembly_start_time"
                    style="width: 100%;height: 24px"
                    type="datetime"
                    value-format="YYYY-MM-DD-HH-mm"
                    placeholder="请选择开始时间"
                    clearable
                />
            </el-col>
            <el-col :span="3" style="">
              <div class="grid-content ep-bg-purple"/>
              <span class="the_font_is_bold">装配结束时间:</span>
            </el-col>
            <el-col :span="4" style="">
              <div class="grid-content ep-bg-purple"/>
                <el-date-picker
                    v-model="form5.input_Assembly_end_time"
                    style="width: 100%;height: 24px"
                    type="datetime"
                    value-format="YYYY-MM-DD-HH-mm"
                    placeholder="请选择结束时间"
                    clearable
                />
            </el-col>
          </el-row>
          <!--检验装配过程-->
          <el-row>
            <el-col :span="3">
              <div class="grid-content ep-bg-purple"/>
              <div
                  style="height:70px;display: flex;align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */">
                <span class="text_is_vertical  the_font_is_bold" >
                  检验<br>装配过程
                </span>
              </div>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="the_font_is_bold">名称</span>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="the_font_is_bold">实际间隙</span>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="the_font_is_bold">合格范围</span>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="the_font_is_bold">名称</span>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="the_font_is_bold">实际间隙</span>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="the_font_is_bold">合格范围</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="">主动转子与齿轮箱间隙</span>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Active_rotor_and_gearbox_clearance_0"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Active_rotor_and_gearbox_clearance_1"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="">从动转子与齿轮箱间隙</span>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Driven_rotor_and_gearbox_clearance_0"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Driven_rotor_and_gearbox_clearance_1"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="">转子与罗茨腔体间隙</span>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Rotor_and_roots_cavity_clearance_0"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Rotor_and_roots_cavity_clearance_1"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="">转子之间间隙</span>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Clearance_between_rotors_0"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Clearance_between_rotors_1"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--测量电机转子跳动值-->
          <el-row>
            <el-col :span="3" style="border-right: 0">
              <div class="grid-content ep-bg-purple"/>
              <div style="text-align: right;"><span >测量电机</span></div>
            </el-col>
            <el-col :span="21" style="border-left: 0">
              <el-row>
                <el-col :span="4" style="border: none">
                  <div class="grid-content ep-bg-purple"/>
                  <div style="text-align: left;"><span >转子跳动值</span></div>
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Measure_the_runout_value_of_the_motor_rotor_0"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Measure_the_runout_value_of_the_motor_rotor_1"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="">量电机侧轴套 B 的跳动值</span>
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Measure_the_runout_value_of_the_motor_side_sleeve_B_0"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Measure_the_runout_value_of_the_motor_side_sleeve_B_1"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--209轴承压板螺丝对角锁紧力矩-->
          <el-row>
            <el-col :span="3" style="border-right: 0">
              <div class="grid-content ep-bg-purple"/>
              <div style="text-align: right;"><span >209轴承压板螺</span></div>
            </el-col>
            <el-col :span="21" style="border-left: 0">
              <el-row>
                <el-col :span="4" style="border: none">
                  <div class="grid-content ep-bg-purple"/>
                  <div style="text-align: left;"><span >丝对角锁紧力矩</span></div>
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_209_bearing_pressure_plate_screw_diagonal_locking_torque_0"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_209_bearing_pressure_plate_screw_diagonal_locking_torque_1"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="">规定轴端 M16 螺钉力矩</span>
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Specifies_the_M16_screw_torque_at_the_end_of_the_shaft_0"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Specifies_the_M16_screw_torque_at_the_end_of_the_shaft_1"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--是否加注润滑油-->
          <el-row>
            <el-col :span="3" style="border-right: 0">
              <div class="grid-content ep-bg-purple"/>
              <div style="text-align: right;"><span >是否加</span></div>
            </el-col>
            <el-col :span="21" style="border-left: 0">
              <el-row>
                <el-col :span="4" style="border: none">
                  <div class="grid-content ep-bg-purple"/>
                  <div style="text-align: left;"><span >注润滑油</span></div>
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-radio-group v-model="form5.radio_Whether_or_not_to_fill_with_lubricating_oil">
                    <el-radio value="是" size="large" class="smallOptions"><span style="font-size: 15px;">是</span>
                    </el-radio>
                    <el-radio value="否" size="large" class="smallOptions"><span style="font-size: 15px;">否</span>
                    </el-radio>
                  </el-radio-group>
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <span class="">加注润滑油量</span>
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                  <el-input
                      v-model="form5.input_Fill_the_amount_of_lubricating_oil"
                      style="width: 100%;height: 24px"
                      clearable
                  />
                </el-col>
                <el-col :span="4" style="border-top: 0">
                  <div class="grid-content ep-bg-purple"/>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--备注-->
          <el-row>
            <el-col :span="3">
              <div class="grid-content ep-bg-purple"/>
              <span class="fontSize the_font_is_bold">备&nbsp;注</span>
            </el-col>
            <el-col :span="21">
              <div class="grid-content ep-bg-purple"/>
              <el-input
                  v-model="form5.input_Remarks"
                  style="width: 100%;"
                  placeholder="备注"
                  clearable
              />
            </el-col>
          </el-row>
        </el-main>
      </el-container>
      <el-button type="success" plain @click="submit5()">提交</el-button>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import {defineProps, reactive, watch} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
const props = defineProps({
  CaseValue: {
    type: String,
    default: ''
  }
});
//表头
const formHead = reactive({
  work_order : '',
  material_No : '',
  name : '',
  pump_Unit_Number : '',
  case : '',
  customer : '',
  spawn_time : '',
  production_quantity : '',
  number_of_downlines : '',
  state : '',
  start_time : '',
  end_time : '',
  production_processes_1 : false,
  production_processes_2 : false,
  production_processes_3 : false,
  production_processes_4 : false,
  production_processes_5 : false,
  production_processes_6 : false,
  production_processes_7 : false,
  production_processes_8 : false,
  production_processes_9 : false,
  production_processes_10 : false,
  urgent : false,
});
watch(() => props.CaseValue, (newVal) => {
  if(newVal != null && newVal !== ""){
    resetFormData(newVal)
  }
});
function resetFormData(newVal){
  axios.get('http://192.168.110.84:8081/staff/gongxuData/byCase/' + newVal)
      .then(response => {
        // 请求成功后的处理
        const data = response.data.data;
        if (response.data.code === 1) {
          if(data !== null){
            // 遍历data对象并更新form
            console.log(data)
            Object.keys(data).forEach(key => {
              formHead[key] = data[key];
            })
            form5.input_Case = formHead.case
          }else {
            resetForm();
          }
        } else {
          ElMessage.error(response.data.message)
        }
      });
}
function resetForm(){
  formHead.work_order = '';
  formHead.material_No = '';
  formHead.name = '';
  formHead.pump_Unit_Number = '';
  formHead.case = '';
  formHead.customer = '';
  formHead.spawn_time = '';
  formHead.production_quantity = '';
  formHead.number_of_downlines = '';
  formHead.state = '';
  formHead.start_time = '';
  formHead.end_time = '';
  formHead.production_processes_1 = false;
  formHead.production_processes_2 = false;
  formHead.production_processes_3 = false;
  formHead.production_processes_4 = false;
  formHead.production_processes_5 = false;
  formHead.production_processes_6 = false;
  formHead.production_processes_7 = false;
  formHead.production_processes_8 = false;
  formHead.production_processes_9 = false;
  formHead.production_processes_10 = false;
  formHead.urgent = false
}
const form5 = reactive({
  input_Case : "",/*Case*/
  input_Roots_dry_pump_number : "",/*罗茨干泵编号*/
  input_Assemblers : "",/*装配人*/
  input_Assembly_start_time : "",/*装配开始时间*/
  input_Assembly_end_time : "",/*装配结束时间*/
  input_Active_rotor_and_gearbox_clearance_0 : "",/*主动转子与齿轮箱间隙 - 实际间隙*/
  input_Active_rotor_and_gearbox_clearance_1 : "",/*主动转子与齿轮箱间隙 - 合格范围*/
  input_Driven_rotor_and_gearbox_clearance_0 : "",/*从动转子与齿轮箱间隙 - 实际间隙*/
  input_Driven_rotor_and_gearbox_clearance_1 : "",/*从动转子与齿轮箱间隙 - 合格范围*/
  input_Rotor_and_roots_cavity_clearance_0 : "",/*转子与罗茨腔体间隙 - 实际间隙*/
  input_Rotor_and_roots_cavity_clearance_1 : "",/*转子与罗茨腔体间隙 - 合格范围*/
  input_Clearance_between_rotors_0 : "",/*转子之间间隙 - 实际间隙*/
  input_Clearance_between_rotors_1 : "",/*转子之间间隙 - 合格范围*/
  input_Measure_the_runout_value_of_the_motor_rotor_0 : "",/*测量电机转子跳动值 - 实际间隙*/
  input_Measure_the_runout_value_of_the_motor_rotor_1 : "",/*测量电机转子跳动值 - 合格范围*/
  input_Measure_the_runout_value_of_the_motor_side_sleeve_B_0 : "",/*量电机侧轴套 B 的跳动值 - 实际间隙*/
  input_Measure_the_runout_value_of_the_motor_side_sleeve_B_1 : "",/*量电机侧轴套 B 的跳动值 - 合格范围*/
  input_209_bearing_pressure_plate_screw_diagonal_locking_torque_0 : "",/*209轴承压板螺丝对角锁紧力矩 - 实际间隙*/
  input_209_bearing_pressure_plate_screw_diagonal_locking_torque_1 : "",/*209轴承压板螺丝对角锁紧力矩 - 合格范围*/
  input_Specifies_the_M16_screw_torque_at_the_end_of_the_shaft_0 : "",/*规定轴端 M16 螺钉力矩 - 实际间隙*/
  input_Specifies_the_M16_screw_torque_at_the_end_of_the_shaft_1 : "",/*规定轴端 M16 螺钉力矩 - 合格范围*/
  radio_Whether_or_not_to_fill_with_lubricating_oil : "",/*是否加注润滑油*/
  input_Fill_the_amount_of_lubricating_oil : "",/*加注润滑油量*/
  input_Remarks : "",/*备注*/
})
const submit5 = function () {
  axios.post('http://192.168.110.84:8081/part5/add', form5)
      .then(response => {
        // 请求成功后的处理
        console.log(response.data);
        if (response.data.code === 1) {
          ElMessage({
            message: response.data.data,
            type: 'success',
          })
          resetForm5()
          TFValueReturn();
        }else {
          ElMessage.error(response.data.message)
        }
      });
}
function resetForm5() {
  form5.input_Case = ""; /* Case */
  form5.input_Roots_dry_pump_number = ""; /* 罗茨干泵编号 */
  form5.input_Assemblers = ""; /* 装配人 */
  form5.input_Assembly_start_time = ""; /* 装配开始时间 */
  form5.input_Assembly_end_time = ""; /* 装配结束时间 */
  form5.input_Active_rotor_and_gearbox_clearance_0 = ""; /* 主动转子与齿轮箱间隙 - 实际间隙 */
  form5.input_Active_rotor_and_gearbox_clearance_1 = ""; /* 主动转子与齿轮箱间隙 - 合格范围 */
  form5.input_Driven_rotor_and_gearbox_clearance_0 = ""; /* 从动转子与齿轮箱间隙 - 实际间隙 */
  form5.input_Driven_rotor_and_gearbox_clearance_1 = ""; /* 从动转子与齿轮箱间隙 - 合格范围 */
  form5.input_Rotor_and_roots_cavity_clearance_0 = ""; /* 转子与罗茨腔体间隙 - 实际间隙 */
  form5.input_Rotor_and_roots_cavity_clearance_1 = ""; /* 转子与罗茨腔体间隙 - 合格范围 */
  form5.input_Clearance_between_rotors_0 = ""; /* 转子之间间隙 - 实际间隙 */
  form5.input_Clearance_between_rotors_1 = ""; /* 转子之间间隙 - 合格范围 */
  form5.input_Measure_the_runout_value_of_the_motor_rotor_0 = ""; /* 测量电机转子跳动值 - 实际间隙 */
  form5.input_Measure_the_runout_value_of_the_motor_rotor_1 = ""; /* 测量电机转子跳动值 - 合格范围 */
  form5.input_Measure_the_runout_value_of_the_motor_side_sleeve_B_0 = ""; /* 量电机侧轴套 B 的跳动值 - 实际间隙 */
  form5.input_Measure_the_runout_value_of_the_motor_side_sleeve_B_1 = ""; /* 量电机侧轴套 B 的跳动值 - 合格范围 */
  form5.input_209_bearing_pressure_plate_screw_diagonal_locking_torque_0 = ""; /* 209轴承压板螺丝对角锁紧力矩 - 实际间隙 */
  form5.input_209_bearing_pressure_plate_screw_diagonal_locking_torque_1 = ""; /* 209轴承压板螺丝对角锁紧力矩 - 合格范围 */
  form5.input_Specifies_the_M16_screw_torque_at_the_end_of_the_shaft_0 = ""; /* 规定轴端 M16 螺钉力矩 - 实际间隙 */
  form5.input_Specifies_the_M16_screw_torque_at_the_end_of_the_shaft_1 = ""; /* 规定轴端 M16 螺钉力矩 - 合格范围 */
  form5.radio_Whether_or_not_to_fill_with_lubricating_oil = ""; /* 是否加注润滑油 */
  form5.input_Fill_the_amount_of_lubricating_oil = ""; /* 加注润滑油量 */
  form5.input_Remarks = ""; /* 备注 */
}

/*调用父方法*/
import { inject } from 'vue';
const TFValueReturn = inject('TFValueReturn');
</script>

<style scoped>
.el-col {
  border: black 1px solid;
}

.text_is_vertical {
  writing-mode: vertical-lr; /* 从上到下竖直排列文字 */
  text-orientation: mixed; /* 保持字符的原始方向 */
}

.fontSize {
  font-size: 20px;
}

.smallOptions {
  height: 20px;
}

.text_is_on_the_left {
  text-align: left;
}
.the_font_is_bold {
  font-weight: bold;
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>